<template>
  <div class="create-user-bg">
    <el-card class="create-user-card">
      <div class="create-user-title">钉钉扫码登录/注册</div>
      <el-divider />
      <el-button type="primary" size="large" class="ding-btn" @click="goDingTalk" v-if="!loading">前往钉钉扫码</el-button>
      <el-result v-if="loading" icon="info" title="正在跳转钉钉..." />
      <el-result v-if="success" icon="success" title="登录/注册成功" />
      <el-result v-if="error" icon="error" :title="errorMsg" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { http } from '../utils/request'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const success = ref(false)
const error = ref(false)
const errorMsg = ref('')

function goDingTalk() {
  loading.value = true
  http.get('/login/dingtalk/login/').then(res => {
    if (res.data && res.data.url) {
      window.location.href = res.data.url
    } else {
      error.value = true
      errorMsg.value = '获取钉钉登录链接失败'
      loading.value = false
    }
  }).catch(() => {
    error.value = true
    errorMsg.value = '网络错误'
    loading.value = false
  })
}
function loginDingTalk() {
  // 钉钉回调带有code参数
  const code = route.query.code
  if (code) {
    loading.value = true
    http.get('/login/dingtalk/callback/', { params: { code } }).then(res => {
      if (res.data && res.data.code === 200) {
        success.value = true
        ElMessage.success('登录成功')
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('userid', res.data.userid)
        setTimeout(() => {
          router.push('/')
        }, 1000)
      } else if (res.data.code === 202) {
        ElMessage.success(res.data.msg || '注册成功')
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('userid', res.data.userid)
        router.push('/user-info')
      } else if (res.data.code === 203) {
        // 需要补充手机号
        ElMessage.warning(res.data.msg || '请补充手机号')
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('userid', res.data.userid)
        router.push('/phone-binding')  // 跳转到手机号绑定页面
      } else {
        error.value = true
        errorMsg.value = res.data.msg || '登录失败'
      }
    }).catch(() => {
      error.value = true
      errorMsg.value = '网络错误'
    }).finally(() => {
      loading.value = false
    })
  }
}
onMounted(() => {
  loginDingTalk()
})
</script>

<style scoped>
.create-user-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #fff 60%, #ffe5cc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-user-card {
  width: 420px;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(34,34,34,0.08);
  padding: 32px 36px 24px 36px;
}
.create-user-title {
  font-size: 26px;
  font-weight: bold;
  color: #222;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.ding-btn {
  width: 100%;
  background: #1677ff;
  border: none;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
}
.ding-btn:hover {
  background: #409eff;
}
</style> 